<template>
  <view class="content">
    <view class="ver-layout-center">
      <image class="logo" src="/static/ic_logo.png"></image>
      <view class="ver-layout" style="margin-top: 10px">
        <view style="font-size: small;color: #4a4a4a;text-align: center">注意事项:</view>
        <view style="font-size: small;color: #4a4a4a">1、排名以分数总体排名</view>
        <view style="font-size: small;color: #4a4a4a">2、相同分数的用时最短排名</view>
      </view>
    </view>
    <view style="margin-top: 60px;width: 70%">
      <view class="hor-layout-center">
        <view class="key-view">姓名</view>
        <text class="key-split">:</text>
        <input v-model="account" placeholder="请输入姓名" class="input-view" maxlength="10"/>
      </view>
      <view class="hor-layout-center" style="position: relative">
        <view class="key-view" style="margin-top: 10px;">手机号</view>
        <text class="key-split" style="margin-top: 10px;">:</text>
        <input v-model="mobile" placeholder="请输入手机号" class="input-view" maxlength="11" type="number"
               style="margin-top: 10px;"/>
        <button class="get-yzm" style="margin-top: 5px;" size="mini" :type="canMobileSend?'primary':'default'"
                @click="getYzmClick">{{ mobileVerify }}
        </button>
      </view>
      <view class="hor-layout-center" style="margin-top: 15px;">
        <view class="key-view">验证码</view>
        <text class="key-split">:</text>
        <input v-model="yzmCode" maxlength="6" placeholder="请输入验证码" class="input-view"/>
      </view>
    </view>
    <button size="small" :type="canLogin?'primary':'default'" class="login-btn" @click="onLoginClick">注册/登陆</button>
    <button v-if="isMobileMine&&userInfo" size="mini" type="primary" style="margin-top: 30px" @click="onLoginEasy">
      手机号一键登录
    </button>
  </view>
</template>

<script>
import {
  exam, home, rank, paper
} from "../../router.js"

export default {
  data() {
    return {
      title: 'Hello',
      canPsdSee: false,
      account: '',
      mobile: '',
      yzmCode: '',
      mobileVerify: '发送验证码',
      userInfo: ''
    }
  },
  computed: {
    canLogin() {
      let loginValue = this.account && this.isMobileRight && this.yzmCode
      return loginValue
    },
    canMobileSend() {
      if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.mobile))
        return false
      if (this.mobileVerify != "发送验证码")
        return false
      return true
    },
    isMobileRight() {
      if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.mobile))
        return false
      return true
    },
    isMobileMine() {
      if (this.mobile === this.userInfo.mobile)
        return true
      return false
    }
  },
  onLoad() {
    // #ifdef H5
    uni.setNavigationBarTitle({
      title: '鄂尔多斯市新杭能源有限公司“落实安全责任，推动安全发展”为主题的知识竞赛'
    })
    // #endif
    this.userInfo = uni.getStorageSync("userInfo")
    if (this.userInfo) this.mobile = this.userInfo.mobile
  },
  onShareAppMessage() {
    let title = "鄂尔多斯市新杭能源有限公司"
    let desc = "“落实安全责任，推动安全发展”为主题的知识竞赛"
    return {
      title,
      content: desc,
      path: home
    }
  },
  onShareTimeline() {
  },
  methods: {
    getYzmClick() {
      if (!this.canMobileSend) {
        uni.showToast({title: "手机号错误！"})
        return
      }
      this.$request('user/sendMobileCode', {mobile: this.mobile}).then(res => {
        uni.showToast({title: "发送成功！"})
        this.startTimeCounter()
      }).catch(err => {
        uni.showToast({title: "发送失败！"})
      })
    },
    startTimeCounter() {
      let num = 20;
      let timer = setInterval(() => {
        num--
        let strVerify = `${num}秒后重试`
        if (num == 0) {
          clearInterval(timer)
          strVerify = "发送验证码"
        }
        this.mobileVerify = strVerify
      }, 1000)
    },
    onLoginClick() {
      let errMsg = ''
      errMsg = this.yzmCode ? errMsg : '请输入验证码'
      errMsg = this.isMobileRight ? errMsg : '手机号不正确'
      errMsg = this.mobile ? errMsg : '请输入手机号'
      errMsg = this.account ? errMsg : '请输入用户名'
      if (errMsg) {
        uni.showToast({title: errMsg})
        return
      }
      let value = {
        username: this.account,
        mobile: this.mobile,
        yzmCode: this.yzmCode
      }
      this.$request('user/loginOrRegister', value).then(res => {
        uni.setStorageSync("userInfo", res.userInfo)
        uni.showToast({title: "登录成功！"})
        setTimeout(() => {
          uni.reLaunch({url: exam})
        }, 500)
      }).catch(err => {
        // uni.showToast({
        // 	title: err.message || "请求失败!"
        // })
      })
    },
    onLoginEasy() {
      this.$request('user/userLogin', {username: this.mobile, password: '123456'}).then(res => {
        uni.setStorageSync("userInfo", res.userInfo)
        uni.showToast({title: "登录成功！"})
        setTimeout(() => {
          uni.reLaunch({url: exam})
        }, 500)
      }).catch(err => {
        uni.showToast({title: err.message || "登陆失败!"})
      })
    }
  }
}
</script>

<style>
page {
  background: whitesmoke;
}

.key-view {
  color: #7d7d7d;
  width: 55px;
  text-align-last: justify;
}

.key-split {
  color: #7d7d7d;
  margin-right: 10px;
}

.input-view {
  /*width: 120px;*/
  flex: 1;
  font-size: small;
  border-bottom: #d9d9d9 solid 1px;
}

.get-yzm {
  white-space: nowrap;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 100px;
  width: 100px;
  margin-top: 70px;
  margin-left: auto;
  margin-right: auto;
}

.login-btn {
  margin-top: 40px;
  font-size: medium !important;
}
</style>
